<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>扇形效果</title>
	</head>
	<style>
		body{
			margin: 0;
			background:#666;
		}
		#box{
			width: 1200px;
			height: 700px;
			background: pink;
			position: relative;
			margin: 100px auto;
		}
		#box div{
			width: 400px;
			height: 100px;
			border-radius: 9px;
			position: absolute;
			left: 555px;
			top: 400px;
			transform-origin: 35px 50px;
			transition: 1s;
		}
		#box div:nth-of-type(1){
			background: #417191;
		}
		#box div:nth-of-type(2){
			background: #ce8298;
		}
		#box div:nth-of-type(3){
			background: #f78992;
		}
		#box div:nth-of-type(4){
			background: #fbc0a5;
		}
		#box div:nth-of-type(5){
			background: #f8988f;
		}
		#box div:nth-of-type(6){
			background: #f16273;
		}
		#box div:nth-of-type(7){
			background: #9c9fcd;
		}
		#box div:nth-of-type(8){
			background: #bae2d3;
		}
		#box div:nth-of-type(9){
			background: #43bab8;
		}
		#box div:nth-of-type(10){
			background: #678d95;
		}
	</style>
	<body>
		<div id="box">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<script>
			var box = document.getElementById("box");
			var divs = box.getElementsByTagName("div");
			var onOff = true;
			setTimeout(go,300);
			for(var i = 0; i < divs.length-1; i++){
				divs[i].index = i;
				divs[i].onclick = function(){
					for(var i = 0; i < divs.length; i++){
						if( i < this.index ){
							divs[i].style.transform = "rotate("+ (350-(i*17)+ this.index*17-80+10) +"deg)";
						};
						if( i > this.index ){
							divs[i].style.transform = "rotate("+ (350-(i*17)+ this.index*17-80-10) +"deg)";
						};
					};
					divs[this.index].style.transform = "rotate("+ (350-(this.index*17)+ this.index*17-80) +"deg)";
				};
			};
			divs[9].onclick = function(){
				if( onOff ){
					shink();
				}else{
					go();
				};
				onOff = !onOff;
				
			};
			function go(){
				for(var i = 0; i < divs.length; i++){
					divs[i].style.transform = "rotate("+ (350-(i*17)) +"deg)";
				};
			};
			function shink(){
				for(var i = 0; i < divs.length; i++){
					divs[i].style.transform = "rotate(0deg)"
				};
			};
		</script>
	</body>
</html>
